<!--
-->
<template>
    <div class="Index">
        <!-- 筛选区 -->
        <table-search-bar :config="requestBodyConfig" :model="requestBody" title="软件日志" @search="searchClicked" />
        <div class="container">
            <vxe-table ref="VXETable" :height="tableHeight" :column-config="{ resizable: false}" :data="state.list" :loading="state.isLoading" :radio-config="{trigger: 'row', highlight: true}" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}" :tree-config="{childrenField: 'children', reserve: true}" border round show-overflow size="small" @current-change="() => {}" @radio-change="() => {}">
                <template #empty>
                    <el-empty :image-size="100" />
                </template>
                <vxe-column fixed="left" title="#" type="seq" width="50" />
                <vxe-column align="left" field="name" title="程序名称" width="250"></vxe-column>
                <vxe-column align="left" field="version" title="版本号" width="120">
                    <template #default="{row}">
                        V{{ row.versionNum }}
                    </template>
                </vxe-column>
                <vxe-column align="left" field="mac" title="Mac地址" width="250"></vxe-column>

                <vxe-column align="left" field="debugOrRelease" title="版本类型" width="120">
                    <template #default="{row}">
                        <el-tag v-if="row.debugOrRelease === 'Debug'" effect="dark" type="warning">测试版</el-tag>
                        <el-tag v-if="row.debugOrRelease === 'Release'" effect="dark" type="primary">正式版</el-tag>
                    </template>
                </vxe-column>
                <vxe-column align="left" field="logType" title="日志类型" width="120">
                    <template #default="{row}">
                        <el-tag v-if="row.logType === 1" effect="dark">普通</el-tag>
                        <el-tag v-if="row.logType === 2" effect="dark" type="danger">错误</el-tag>
                    </template>
                </vxe-column>
                <vxe-column align="left" field="errorType" title="错误类型" width="120">
                    <template #default="{row}">
                        <el-tag v-if="row.errorType === 0" effect="dark" type="danger">已知错误</el-tag>
                        <el-tag v-if="row.errorType === 1" effect="dark" type="warning">未知错误</el-tag>
                    </template>
                </vxe-column>
                <vxe-column align="left" field="errorLocation" min-width="200" title="报错位置"></vxe-column>
                <vxe-column field="logOccurrenceTime" title="发生时间" width="200">
                    <template #default="{row}">
                        <g-date-time-preview :value="row.logOccurrenceTime" />
                    </template>
                </vxe-column>
                <vxe-column :resizable="false" field="action" fixed="right" title="操作" :width="$widthColumn(100)">
                    <template #default="{row}">
                        <table-action :actions="[
                            {title: '查看', type: 'primary', ok: showLogContent},
                            {title: '删除', permission: permission.delete, type: 'danger', ok: deleteData, confirm: '您确定要删除当前数据么?'},
                        ]" :data="row" />
                    </template>
                </vxe-column>
            </vxe-table>
            <div class="page-config">
                <vxe-pager v-model:current-page="requestParams.pageIndex" v-model:page-size="requestParams.pageSize" :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" :page-sizes="pageConfig.sizes" :total="pageConfig.total" background size="mini" @page-change="onPageChange" />
            </div>
        </div>
        <LogContent ref="logContent"/>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import * as api from "./api.js";
import {useStore} from "vuex"
import LogContent from "./LogContent.vue";

const {$message, $fixedColumn, $widthColumn} = window;

const props = defineProps({
    computerProgramId: {
        type: [String, Number],
    },
    height: {
        type: Number,
    }
})
const store = useStore()

const state = reactive({
    list: []
})
const tableHeight = computed(() => store.getters.layoutType === "mobile" ? "" : props.height || (store.getters.containerHeight - 194))


// 当前页面功能权限
const permission = {
    delete: "DeviceOperationLog:DeleteDeviceOperationLog",
};

// 请求query参数
const requestParams = reactive({
    orderCol: "id",
    isDesc: true,
    pageIndex: 1,
    pageSize: 20,
});
// 请求body参数
const requestBody = reactive({
    logType: null,
    startLogOccurrenceTime: null,
    endLogOccurrenceTime: null,
})

// 筛选区域配置
const requestBodyConfig = reactive({
    logType: {label: "日志类型", component: "el-select", data: [{name: "普通", value: 1}, {name: "错误", value: 2}]},
    startLogOccurrenceTime: {label: "开始时间", component: "el-date-picker-datetime", format: "YYYY-MM-DD HH:mm:ss", valueFormat: "YYYY-MM-DDTHH:mm:ss"},
    endLogOccurrenceTime: {label: "截止时间", component: "el-date-picker-datetime", format: "YYYY-MM-DD HH:mm:ss", valueFormat: "YYYY-MM-DDTHH:mm:ss", disabledDate: (date) => new Date(date).getTime() <= new Date(requestBody.startLogOccurrenceTime).getTime()}
})

if (!props.computerProgramId) {
    requestBodyConfig.name = {label: "程序名称", component: "el-input"}
}

// 分页配置
const pageConfig = reactive({
    total: 0,
    sizes: [10, 20, 50, 100, 200]
})

const filters = {
    dateTime(val, format = "YYYY-MM-DD HH:mm:ss") {
        if (!val) return "";
        return $dayjs(val).format(format);
    }
}
// 日志内容
const logContent = ref()
function showLogContent(row) {
    logContent.value.show({
        title: "日志内容",
        options: row
    })
}


// 删除
async function deleteData({id}) {
    console.danger("删除: ", id)
    const {success, data} = await api.DeleteDeviceOperationLog({id});
    if (!success) return 0;
    reload();
    $message.success("删除成功")
}


// 点击搜索
function searchClicked() {
    console.primary("搜索条件: ", requestBody)
    reload(true);
}

// 重置
function reset() {
    requestBody.logType = null;
    requestBody.startLogOccurrenceTime = null;
    requestBody.endLogOccurrenceTime = null;
    reload(true)
}

// 查询列表
async function loadList() {
    const params = {
        ...requestParams
    };
    const body = {
        ...requestBody,
        computerProgramId: props.computerProgramId,
    };
    state.isLoading = true;
    const {success, data} = await api.GetDeviceOperationLogPageList(params, body);
    state.isLoading = false;
    if (!success) return 0;
    const {items, totalCount} = data;
    state.list = items;
    pageConfig.total = totalCount;
}

// 分页事件
function onPageChange({type}) {
    if (type === "current") {
        loadList()
    }
    if (type === "size") {
        reload(true)
    }
}

// 刷新
function reload(resetPageIndex) {
    if (resetPageIndex) requestParams.pageIndex = 1;
    loadList()
}


onMounted(() => {
    reload(true)
})
</script>


<style lang="scss" scoped>
.Index {
    margin: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;

    .container {
        padding: 10px;
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
    }
}
</style>
